<template>
  <div id="email" class="container">
    <el-tabs v-model="activeName" class="tab-card tabs-white" type="card" @tab-click="handleClick">
      <el-tab-pane :label="menu[4]" name="first">
        <el-form :model="companyForm" label-position="top">
          <el-form-item :label="$t('公司名称')" prop="company_name">
            <el-input v-model="companyForm.company_name" />
          </el-form-item>
          <el-form-item :label="$t('公司电话')" prop="company_phone">
            <el-input v-model="companyForm.company_phone" />
          </el-form-item>
          <el-form-item :label="$t('公司邮箱')" prop="company_email">
            <el-input v-model="companyForm.company_email" />
          </el-form-item>
          <el-form-item :label="$t('公司地址')" prop="company_address">
            <el-input v-model="companyForm.company_address" />
          </el-form-item>
          <el-form-item :label="$t('版权标识')" prop="huocms_powerby">
            <el-input v-model="companyForm.huocms_powerby" />
          </el-form-item>
          <el-button type="primary" class="save" @click="saveCompany">
            {{ $t('保存') }}
          </el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="menu[0]" name="second">
        <Email v-if="activeName == 'second'" :data="emailData" />
      </el-tab-pane>
      <el-tab-pane :label="menu[1]" name="third">
        <Files v-if="activeName == 'third'" :data="filesData" />
      </el-tab-pane>
      <!-- <el-tab-pane :label="menu[2]" name="fourth">
        <Statistics v-if="activeName == 'fourth'" :data="statisticsData" />
      </el-tab-pane> -->
      <el-tab-pane :label="menu[3]" name="fifth">
        <Others v-if="activeName == 'fifth'" :data="othersData" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import systemApi from '@/api/system/system.js'
import Files from './components/files.vue'
import Others from './components/others.vue'
import Email from './components/email.vue'
export default {
  components: {
    Files,
    Others,
    Email
  },
  data() {
    return {
      companyForm: {
        group: '',
        company_name: '',
        company_address: '',
        company_phone: '',
        company_email: '',
        huocms_powerby: 'Powered by HuoCMS'
      },
      menu: '',
      activeName: 'first',
      enailData: [], // 邮箱配置
      filesData: [], // 文件上传设置
      othersData: [], // 第三方设置
      statisticsData: [], // 统计分析账号
      companyData: [] // 公司配置
    }
  },
  created() {
    this.getList()
  },
  mounted() { },
  methods: {
    // 配置项列表
    getList() {
      systemApi.sysList().then(res => {
        // this.menu = res.data
        const tabMenu = []
        res.data.forEach(el => {
          tabMenu.push(el.form_title)
        })

        this.menu = tabMenu
        this.emailData = res.data[0]
        this.filesData = res.data[1]
        this.statisticsData = res.data[2]
        this.othersData = res.data[3]
        this.companyData = res.data[4]
        this.companyForm.group = res.data[4].group
        const arr = this.companyData.children
        arr.forEach(el => {
          this.companyForm[el.title] = el.value
        })
      })
    },

    saveCompany() {
      systemApi.sysUpdate({ ...this.companyForm }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },

    handleClick(tab, event) { }
  }
}
</script>
<style lang="scss">
#email {
  .el-select {
    width: 100%;
  }
}
</style>
<style scoped lang="scss">
.avatar {
  height: 60px;
}
</style>
